<template>
  <div class="app-container customer-div">
    <div style="">
      <div class="total-row" >
        <el-row :gutter="30">
          <el-col :span="4" >
            <div class="total-col">
              <div class="num">{{ sumData.unPaidAmount | numFifter }}</div>
              <div class="name">计算总额
                <el-tooltip content="到现在为目所有未付款金额的总和" placement="top">
                    <i class="el-icon-warning"></i>
                 </el-tooltip>
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="total-col">
              <div class="num">{{ sumData.todayInterest | numFifter }}</div>
              <div class="name">今日利息
                <el-tooltip content="当天所有未付款金额产生的利息" placement="top">
                  <i class="el-icon-warning"></i>
                </el-tooltip>
              </div>
            </div>
          </el-col>
          <el-col :span="4" >
            <div class="total-col">
              <div class="num">{{ sumData.interestAmount| numFifter }}</div>
              <div class="name">利息总额
                <el-tooltip content="到当天为止所有未付款金额产生的利息总和" placement="top">
                  <i class="el-icon-warning"></i>
                </el-tooltip>
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="total-col">
              <div class="num">{{ sumData.interestAll | numFifter}}</div>
              <div class="name">累计利息总额
                <el-tooltip content="已结清欠款及未结清欠付款总额产生的利息" placement="top">
                  <i class="el-icon-warning"></i>
                </el-tooltip>
              </div>
            </div>
          </el-col>
            <el-col :span="4">
              <div class="total-col">
                <div class="num">{{ sumData.unPaidCustomerNum | numFifter}}</div>
                <div class="name">计息客户数</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="total-col">
                <div class="num">{{ sumData.unPaidOrderNum | numFifter}}</div>
                <div class="name">计息合同数</div>
              </div>
            </el-col>
        </el-row>
      </div>
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">

        <el-form-item label="合同号：">
          <el-input v-model="listQuery.orderSn"></el-input>
        </el-form-item>
        <el-form-item label="客户名称：">
          <el-autocomplete
            clearable
            class="inline-input"
            value-key="customerName"
            :fetch-suggestions="querySearch"
            v-model="listQuery.keywords"
            placeholder="请输入内容"
            @clear="clearKeywords"
            @select="handleSelectCustomerName"
            :trigger-on-focus="false"
            style="width: 270px;"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="业务员：">
          <el-select v-model="listQuery.userId" filterable placeholder="请选择" clearable>
            <el-option
                    v-for="item in userOptionList"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            @click="handleSearchList()"
            type="primary">
            查询
          </el-button>
          <el-button
                  :loading="btnLoading"
                  @click="downloadExcel()"
                  type="primary">
            导出
          </el-button>
        </el-form-item>
      </el-form>
    </div>
      <!--数据列表-->
      <div class="table-container">
        <el-table
          v-loading="listLoading"
          :data="tableData"
          border
          style="width: 100%; margin-top: 20px">
          <el-table-column  label="合同号" width="140" align="center" prop="orderSn">
            <template slot-scope="scope">
              <el-link @click="toOrderDetail(scope.row.orderId)" type="primary" style="font-size:12px">
                {{scope.row.orderSn}}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column  label="财务状态" width="100" align="center" prop="orderSn">
            <template slot-scope="scope">
              {{scope.row.financeState}}
            </template>
          </el-table-column>
          <el-table-column  label="支付状态" width="100" align="center" prop="orderSn">
            <template slot-scope="scope">
              {{scope.row.payState}}
            </template>
          </el-table-column>
          <el-table-column
            label="客户名称"
            width="300">
            <template slot-scope="scope">
              {{scope.row.customerName}}
            </template>
          </el-table-column>
          <el-table-column
                  label="采购评级"
                  width="100"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.customerLabel}}
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsNum"
            align="center"
            label="合同数量"
            width="100">
          </el-table-column>
          <el-table-column
            align="center"
            width="120"
            label="合同金额">
            <template slot-scope="scope">
              {{scope.row.orderAmount}}
            </template>
          </el-table-column>
          <el-table-column
            label="已付金额"
            width="120"
            align="center">
            <template slot-scope="scope">
              {{scope.row.paidAmount}}
            </template>
          </el-table-column>
          <el-table-column
                  label="未付金额"
                  width="120"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.unPaidAmount}}
            </template>
          </el-table-column>
          <el-table-column
            label="已发货数量"
            width="120"
            align="center">
            <template slot-scope="scope">
              {{scope.row.goodsSendNum}}
            </template>
          </el-table-column>
          <el-table-column
                  label="未发货数量"
                  width="120"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.goodsUnSendNum}}
            </template>
          </el-table-column>
          <el-table-column
                  label="计息金额"
                  width="120"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.computeAmount}}
            </template>
          </el-table-column>
          <el-table-column
            label="结算方式"
            width="150"
            align="center">
            <template slot-scope="scope">
              {{scope.row.orderRemark}}
            </template>
          </el-table-column>
          <el-table-column
                  label="业务员"
                  width="100"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.userName }}
            </template>
          </el-table-column>
          <el-table-column
                  label="状态"
                  width="100">
            <template slot-scope="scope">
              {{scope.row.orderState}}
            </template>
          </el-table-column>
<!--          <el-table-column-->
<!--                  align="center"-->
<!--                  label="资金成本(利息)"-->
<!--                  width="150">-->
<!--            <template slot-scope="scope">-->
<!--              <span style="color:Red">{{scope.row.interestAmount}}</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column
            align="center"
            label="销售资金成本"
            width="150">
            <template slot-scope="scope">
                {{scope.row.saleCost}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="采购资金成本"
            width="150">
            <template slot-scope="scope">
              {{scope.row.purchaseCost}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="销售资金毛利"
            width="150">
            <template slot-scope="scope">
              {{scope.row.saleProfit}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="采购资金毛利"
            width="150">
            <template slot-scope="scope">
              {{scope.row.purchaseProfit}}
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            width="150"
            label="操作"
            align="center">
            <template slot-scope="scope">
              <el-button
                  type="text"
                  size="mini"
                  @click="showDialog(scope.row)">成本明细
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="showDialog2(scope.row)">利息记录
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>

    <!--成本明细-->
    <el-dialog
            :close-on-click-modal="false"
            :beforeClose="handleClose"
            title="成本明细"
            :visible.sync="dialogVisible"
            width="800px">
            <div style="overflow: hidden">
              <div class="table-container">
                <el-table
                  v-loading="listLoading2"
                  :data="tableData2"
                  border
                  style="width: 100%; margin-top: 20px">
                  <el-table-column  label="合同号" width="140" align="center" prop="orderSn">
                    <template slot-scope="scope">
                        {{scope.row.orderSn}}
                    </template>
                  </el-table-column>
                  <el-table-column  label="发货单号" width="150" align="center" prop="orderSn">
                    <template slot-scope="scope">
                      {{scope.row.deliverSn}}
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="客户名称"
                    width="300">
                    <template slot-scope="scope">
                      {{scope.row.customerName}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="发货时间"
                    width="100"
                    align="center">
                    <template slot-scope="scope">
                      {{scope.row.shipDate}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="shipNum"
                    align="center"
                    label="发货数量"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    width="120"
                    label="发货总金额">
                    <template slot-scope="scope">
                      {{scope.row.shipAmount}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="发货已收金额"
                    width="120"
                    align="center">
                    <template slot-scope="scope">
                      {{scope.row.shipPaidAmount}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="发货未收金额（计息金额）"
                    width="100"
                    align="center">
                    <template slot-scope="scope">
                      {{scope.row.shipUnpaidAmount}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="计息天数"
                    width="120"
                    align="center">
                    <template slot-scope="scope">
                      {{scope.row.computeDays}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="业务员"
                    width="120"
                    align="center">
                    <template slot-scope="scope">
                      {{scope.row.userName}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="资金成本"
                    width="120"
                    align="center">
                    <template slot-scope="scope">
                      {{scope.row.interestAmount}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="利息更新时间"
                    width="150"
                    align="center">
                    <template slot-scope="scope">
                      {{scope.row.computeTime}}
                    </template>
                  </el-table-column>

                </el-table>
              </div>
              <div class="pagination-container">
                <el-pagination
                  background
                  @size-change="handleSizeChange2"
                  @current-change="handleCurrentChange2"
                  layout="total, sizes,prev, pager, next,jumper"
                  :current-page.sync="listQuery2.pageNum"
                  :page-size="listQuery2.pageSize"
                  :page-sizes="[10,15,20]"
                  :total="count2">
                </el-pagination>
              </div>
            </div>
    </el-dialog>

    <!--利息记录-->
    <el-dialog
      :close-on-click-modal="false"
      :beforeClose="handleClose2"
      title="利息记录"
      :visible.sync="dialogVisible2"
      width="800px">
      <div style="overflow: hidden">
        <div class="table-container">
          <el-table
            v-loading="listLoading3"
            :data="tableData3"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column  label="发货单号" min-width="150" align="center" prop="orderSn">
              <template slot-scope="scope">
                {{scope.row.deliverSn}}
              </template>
            </el-table-column>
            <el-table-column  label="合同号" min-width="140" align="center" prop="orderSn">
              <template slot-scope="scope">
                <span style="color:#409EFF;cursor: pointer;text-decoration: underline" @click="toOrderDetail(scope.row.orderId)">{{scope.row.orderSn}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="客户名称"
              min-width="300">
              <template slot-scope="scope">
                {{scope.row.customerName}}
              </template>
            </el-table-column>
            <el-table-column
              label="合同数量"
              align="center"
              width="100">
              <template slot-scope="scope">
                {{scope.row.orderNum}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="合同金额"
              width="100">
              <template slot-scope="scope">
                {{scope.row.orderAmount}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="发货数量"
              width="100">
              <template slot-scope="scope">
                {{scope.row.deliverNum}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="发货金额"
              width="100">
              <template slot-scope="scope">
                {{scope.row.deliverAmount}}
              </template>
            </el-table-column>
            <el-table-column
              label="业务员"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.userName}}
              </template>
            </el-table-column>
            <el-table-column
              label="计息金额"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.computeAmount}}
              </template>
            </el-table-column>
            <el-table-column
              prop="interestRate"
              align="center"
              label="计息比例"
              min-width="100">
            </el-table-column>
            <el-table-column
              align="center"
              min-width="100"
              label="利息">
              <template slot-scope="scope">
                {{scope.row.interest}}
              </template>
            </el-table-column>
            <el-table-column
              label="计息日期"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.computeTime}}
              </template>
            </el-table-column>

          </el-table>

        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange3"
            @current-change="handleCurrentChange3"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery3.pageNum"
            :page-size="listQuery3.pageSize"
            :page-sizes="[10,15,20]"
            :total="count3">
          </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {getCustomerOption,getOrderUsersList} from '@/api/partner'
  import {validateCommission} from '@/utils/validate';
  import {numberToCurrencyNo} from '@/utils/index';
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'
  import {capitalCostList, capitalCostSummary, capitalCostDetailList, capitalCostInterestList} from "../../api/partner";
    const defaultListQuery={
      "orderSn"    :      "",   //订单号
      "customerId"     :      null,  //业务员Id
      "userId" :     null, //发货时间
      "pageNum"      :    1,  //第几页
      "pageSize"     :    10, //每页几条
    };
  const defaultListQuery2={
    "pageNum"      :    1,  //第几页
    "pageSize"     :    10, //每页几条
  };
    const defaultPriceForm={
      deliverId:'',
      deliverSn : '',
      customerName:'',
      shipGoodsNum:'',
      shipGoodsAmount:'',
    };
    export default {
      name: "index",
      data(){
        const validatePayAmount = (rule, value, callback) => {
          if (!validateCommission(parseFloat(value))) {
            callback(new Error('非负整数或小数'))
          } else if(value > this.priceForm.unPaidAmount){
            callback(new Error('收款金额大于未付金额'))
          }else {
            callback()
          }
        };
          return {
              listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
              tableData: [],
              count: 0,
              listLoading: false,
              btnLoading:false,
              userOptionList:[],
              roles:store.getters.roles ? store.getters.roles : [],

              listQuery2: JSON.parse(JSON.stringify(defaultListQuery2)),
              tableData2: [],
              count2: 0,
              listLoading2: false,
              dialogVisible:false,

              listQuery3: JSON.parse(JSON.stringify(defaultListQuery2)),
              tableData3: [],
              count3: 0,
              listLoading3: false,
              dialogVisible2:false,

              sumData:{
                unPaidAmount:'',
                todayInterest:'',
                interestAmount:'',
                interestAll:'',
                unPaidCustomerNum:'',
                unPaidOrderNum:''
              },
          }
      },
      computed: {
        ...mapGetters([
          'name',
          'mobile',
          'userId'
        ]),
      },
      created() {
        this.getList();
        this.getsumData();
        this.getUserOptionList();
      },
      watch:{

      },
      filters: {
        formatCreateTime(time) {
          if(time){
            let date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
          }else{
            return '--'
          }
        },
        numFifter(val) {
          return numberToCurrencyNo(val)
        },
      },
      methods:{
        //获取汇总数据
        getsumData(){
          capitalCostSummary().then((res)=>{
              this.sumData.unPaidAmount = res.unPaidAmount;
              this.sumData.todayInterest = res.todayInterest;
              this.sumData.interestAmount = res.interestAmount;
              this.sumData.interestAll = res.interestAll;
              this.sumData.unPaidCustomerNum = res.unPaidCustomerNum;
              this.sumData.unPaidOrderNum = res.unPaidOrderNum;
          })
        },
        toOrderDetail(orderId){
          let routeData = this.$router.resolve({name:'purchaseDetail',query:{id:orderId,type:'see',seeType:'caiWu'}});
          window.open(routeData.href);
        },

        //下载excle
        downloadExcel(){
          let params = JSON.parse(JSON.stringify(this.listQuery));
          params.isExport = 1;
          delete params.keywords;
          delete params.pageNum;
          delete params.pageSize;
          this.btnLoading = true;
          capitalCostList(params).then((res)=>{
            this.btnLoading = false;
            require.ensure([], () => {
              const { export_json_to_excel } = require('sheet/Export2Excel');
              const tHeader = res.title;
              const filterVal = res.columns;
              const list = res.list;
              const data = this.formatJson(filterVal, list);
              export_json_to_excel(tHeader, data, res.fileName);
            })
          }).catch(()=>{
            this.btnLoading = false;
          })
        },

        //下载表格数据格式化
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => v[j]))
        },

        //显示资金成本弹窗
        showDialog(item){
            this.dialogVisible = true;
            this.listQuery2.ccoId = item.ccoId;
            this.getList2();
        },

        //关闭资金成本弹窗
        handleClose(){
          this.dialogVisible = false;
        },

          //获取员工下拉选项
          getUserOptionList(){
            getOrderUsersList().then((res)=>{
                  this.userOptionList = res;
              })
          },

          //选择员工名称
          handleSelectUserName(key,item){
              this.listQuery[key] = item.userId;
          },

          //客户名称输入匹配
          querySearch(queryString, cb){
              getCustomerOption({keywords:queryString}).then((res)=>{
                  cb(res);
              })
          },

          //选择客户名称
          handleSelectCustomerName(item){
              this.listQuery.keywords = item.customerName;
              this.listQuery.customerId = item.customerId
          },

          //清除客户选择
        clearKeywords(){
          this.listQuery.customerId = ''
        },

        handleSizeChange(val){
          this.listQuery.pageNum = 1;
          this.listQuery.pageSize = val;
          this.getList();
        },
        handleCurrentChange(val){
          this.listQuery.pageNum = val;
          this.getList();
        },

        handleSearchList(){
          this.listQuery.pageNum = 1;
          this.getList();
        },

        //获取列表
        getList() {
          this.listLoading = true;
          let data = JSON.parse(JSON.stringify(this.listQuery));
          delete data.keywords;
          capitalCostList(data).then(response => {
            this.tableData = response.list;
            this.count = response.count;
            this.listLoading = false;
          }).catch(()=>{
            this.listLoading = false;
          });
        },


        handleSizeChange2(val){
          this.listQuery2.pageNum = 1;
          this.listQuery2.pageSize = val;
          this.getList2();
        },
        handleCurrentChange2(val){
          this.listQuery2.pageNum = val;
          this.getList2();
        },

        //获取列表
        getList2() {
          this.listLoading2 = true;
          let data = JSON.parse(JSON.stringify(this.listQuery2));
          capitalCostDetailList(data).then(response => {
            this.tableData2 = response.list;
            this.count2 = response.count;
            this.listLoading2 = false;
          }).catch(()=>{
            this.listLoading2 = false;
          });
        },

        //显示利息记录弹窗
        showDialog2(item){
          this.dialogVisible2 = true;
          this.listQuery3.ccoId = item.ccoId;
          this.getList3();
        },

        //关闭利息记录弹窗
        handleClose2(){
          this.dialogVisible2 = false;
        },

        handleSizeChange3(val){
          this.listQuery3.pageNum = 1;
          this.listQuery3.pageSize = val;
          this.getList3();
        },
        handleCurrentChange3(val){
          this.listQuery3.pageNum = val;
          this.getList3();
        },

        //获取列表
        getList3() {
          this.listLoading3 = true;
          let data = JSON.parse(JSON.stringify(this.listQuery3));
          capitalCostInterestList(data).then(response => {
            this.tableData3 = response.list;
            this.count3 = response.count;
            this.listLoading3 = false;
          }).catch(()=>{
            this.listLoading3 = false;
          });
        },
      },
    }
</script>

<style lang="scss">
  .cspantd .cell{
    padding:0
  }
  .total-row{
    margin-bottom:40px;
    text-align: center;
    .total-col{
      border:1px solid #eee;
      padding:30px 0;
      border-radius: 20px;

    }
    .num{
      font-size:24px;
      font-weight: bold;

    }
    .name{
      font-size:14px;
      color:#999;
      margin-top:10px
    }
  }
</style>
